<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用promise完成多次ajax请求</title>
  <script type="text/javascript" src="script/jquery-3.7.1.min.js"></script>
  <script type="text/javascript">

    //先请求到monster.json
    //1.先创建Promise
    //2.构造函数传入箭头函数作为参数列表
    //3.请求成功的话调用resolve函数，请求失败的话调用reject函数
    //4.箭头函数体，仍然是用jquery发出ajax请求
    let promise=new Promise((resolve,reject)=>{
        //发出ajax
      $.ajax({
        url:"data/monster.json",
        success(resultData){ //成功的回调函数
            console.log("promise发出的第一次ajax monster的基本信息=",resultData)
            resolve(resultData)
        },
        error(err) {
          // console.log("promise发出异步请求异常=",err)
          reject(err)
        }
      })
    })
    promise.then((resultData)=>{
      return new Promise((resolve,reject)=>{
        $.ajax({
          url: `data/monster_detail_${resultData.id}.json`,
          success(resultData) {
            console.log("第2次请求 monster_detail_1详细信息=", resultData)
          },
          error(err) {
            // console.log("promise第2次请求发出异步请求异常=",err)
            reject(err)
          }
        })
      })
    }).catch((err)=>{ //这里(err)写成err也行，因为只有一个参数
            console.log("promise请求异常") //如果需要输出异常的细节，可以在后面加err.等等
    })
    // .then((reultDta)=>{})
    //在后面可以进行更多次


  </script>
</head>
<body>

</body>
</html>